<template>
  <div class="app-container receipt-detail">
    <header class="detail-container">
      <div class="top-bar">
        <div class="top-bar-tag"></div>
        <div class="top-bar-title">审批详情</div>
      </div>
      <div class="detail-table">
        <table>
          <tr>
            <td>请假人：</td>
            <td>{{qingJia.qingJiaRenName}}</td>
            <td>请假类型：</td>
            <td>{{qingJia.qjtype}}</td>

          </tr>
          <tr>
            <td>开始时间：</td>
            <td>{{qingJia.qjstime}}</td>
            <td>结束时间：</td>
            <td>{{qingJia.qjetime}}</td>
          </tr>
          <tr>
            <td>请假原因：</td>
            <td colspan="3">{{qingJia.qjyy}}</td>
          </tr>
        </table>
      </div>
    </header>
    <flow-approve-sign :flowList="flowList"></flow-approve-sign>
    <flow-approve-comment v-if="showSave"
                          :params="params"
    ></flow-approve-comment>

  </div>
</template>

<script>
  import FlowApproveComment from '@/views/components/FlowApproveComment'
  import FlowApproveSign from '@/views/components/FlowApproveSign'
  import qingJiaAPI from '@/api/qingJia/qingJia'

  export default {
    name: 'JiaBanApprovalDetail',
    components: { FlowApproveComment, FlowApproveSign },
    data() {
      return {
        qingJia: {
          auditorIdList: [],
          qjetime: '',
          qjsime: '',
          qjtype: '',
          qjyy: '',
          qingJiaRenId: '',
          qingJiaId: this.$route.params.id,
          qingJiaRenName: '',
          stateName: ''
        },
        flag: false,
        flowList: [],
        params: {
          API: qingJiaAPI,
          url: '/work-qingjia/approval-list',
          id: ''
        }
      }
    },
    computed: {
      showSave() {
        return this.$route.params.flag === 'true'
      }
    },
    created() {
      this.fetchData()
      this.getFlowList()
      this.params.id = this.qingJia.qingJiaId
    },
    methods: {
      getFlowList() {
        qingJiaAPI.getFlowList(this.qingJia.qingJiaId).then(res => {
          console.log('getFlowList', res.result)
          this.flowList = res.result
        })
      },
      fetchData() {
        qingJiaAPI.getById(this.qingJia.qingJiaId).then(res => {
          this.qingJia = res
          this.qingJia.qjstime = this._util.format(this.qingJia.qjstime)
          this.qingJia.qjetime = this._util.format(this.qingJia.qjetime)
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang="scss">
</style>
<style scoped lang="scss">
  $height: 35px;
  $borderColor: 1px solid #e0e0e0;
  $boxShadow: 0 0 3px rgba(0, 0, 0, 0.1);

  .list-move {
    transition: transform 0.3s linear;
  }

  .app-container {
    font-size: 14px;
    padding: 15px 150px;
    background-color: #F4F9FD;
    min-height: calc(100vh - 86px);
    box-sizing: border-box;

    .detail-container {
      border: $borderColor;
      margin-bottom: 20px;
      box-shadow: $boxShadow;

      .main {
        padding: 15px;
        background: white;
      }
    }
  }

  .detail-container {
    .detail-table {
      padding: 15px;
      line-height: 30px;
      background-color: white;
    }

    .detail-content {
      background-color: white;
      padding: 15px;
      line-height: 30px;
      border-top: $borderColor;
    }
  }

  /*  .circulation-container {
      .main {
        i {
          font-size: 15px;
          cursor: pointer;
          transition: all 0.1s linear;
          color:gray;
          &:hover {
            color: #409EFF;
          }
          &.template-add {
            margin-left: 10px;
            font-size: 20px;
          }
        }
        .table-container {
          margin: 10px 0;
        }
      }
    }
    .comment-container {
      .main {
        display: flex;
        justify-content: space-between;
        .comment-box {
          width: 70%;
          margin-right: 20px;
        }
        .btn-box {
          width: 30%;
        }
      }
    }*/

  table tr td:nth-of-type(odd) {
    text-align: right;
    width: 10%;
    color: #606060;
    font-size: 13px;
  }

  table tr td:nth-of-type(even) {
    text-align: left;
    padding-left: 10px;
    width: 15%;
    box-sizing: border-box;
    color: #555555;
  }

  .top-bar {
    height: $height;
    line-height: $height;
    padding: 0 15px;
    background-color: #FBFBFB;
    border-bottom: $borderColor;
    display: flex;
    justify-content: space-between;

    .top-bar-tag {
      width: 5px;
      height: $height;
    }

    .top-bar-title {
      font-size: 16px;
    }

    .top-bar-section {

    }
  }

  .btn-box {
    .person-list {
      .el-checkbox {
        margin: 20px 0 10px;
      }
    }
  }


</style>
